<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ODF电子标签管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        :root {
            --primary: #2c6fbb;
            --secondary: #3a9d23;
            --accent: #ffc107;
            --dark: #1e2a38;
            --light: #f5f7fa;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --grey: #e0e0e0;
            --m-red: #ED1C24;
            --border: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: #333;
            height: 100vh;
            overflow: hidden;
        }

        #app-container {
            display: flex;
            flex-direction: column;
            max-width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        /* 头部导航 */
        .app-header {
            background-color: var(--dark);
            color: white;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .app-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .app-logo h1 {
            font-weight: 600;
            font-size: 1.6rem;
        }

        .app-logo i {
            color: var(--accent);
            font-size: 1.8rem;
        }

        .mode-switch {
            display: flex;
            gap: 8px;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 50px;
            padding: 5px;
        }

        .mode-switch button {
            border: none;
            background: none;
            color: rgba(255, 255, 255, 0.7);
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .mode-switch button.active {
            background-color: var(--accent);
            color: var(--dark);
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        /* 标签页导航 */
        .tab-nav {
            display: flex;
            background-color: var(--primary);
            padding: 0 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .tab-nav button {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            padding: 14px 24px;
            font-size: 1.05rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            transition: all 0.3s;
        }

        .tab-nav button.active {
            color: white;
            background-color: rgba(255, 255, 255, 0.15);
        }

        .tab-nav button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--accent);
        }

        /* 主内容区 */
        .app-content {
            flex: 1;
            padding: 25px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .content-wrapper {
            display: flex;
            flex: 1;
            gap: 25px;
            height: 100%;
            overflow: hidden;
        }

        /* ODF结构面板 */
        .odf-structure-panel {
            width: 260px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .panel-header {
            padding: 18px 20px;
            background-color: #f8f9fc;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            color: var(--dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-header-actions {
            display: flex;
            gap: 12px;
        }

        .panel-header-actions button {
            background: none;
            border: none;
            color: #666;
            font-size: 1.1rem;
            cursor: pointer;
        }

        .panel-header-actions button:hover {
            color: var(--primary);
        }

        .panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        /* 标签绑定主区域 */
        .binding-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .binding-view {
            flex: 1;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border);
            display: flex;
            overflow: hidden;
        }

        .binding-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
        }

        .binding-actions .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 25px;
            border-radius: 8px;
            border: none;
            background-color: var(--primary);
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .binding-actions .btn:hover {
            background-color: #1a519e;
        }

        .binding-actions .btn-success {
            background-color: var(--success);
        }

        .binding-actions .btn-success:hover {
            background-color: #3d8b40;
        }

        .binding-actions .btn-warning {
            background-color: var(--warning);
        }

        .binding-actions .btn-warning:hover {
            background-color: #e68a00;
        }

        /* ODF树形结构 */
        .odf-tree {
            list-style: none;
            padding-left: 0;
        }

        .tree-item {
            padding: 12px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            position: relative;
        }

        .tree-item:hover {
            background-color: #f0f5ff;
        }

        .tree-item.active {
            background-color: #e3f2fd;
            color: var(--primary);
        }

        .tree-item i {
            margin-right: 12px;
            color: #777;
            font-size: 1.1rem;
        }

        .tree-toggle {
            margin-right: 8px;
            cursor: pointer;
            width: 20px;
            text-align: center;
        }

        .tree-children {
            padding-left: 32px;
        }

        .tag-count {
            position: absolute;
            right: 15px;
            background-color: var(--primary);
            color: white;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 20px;
        }

        /* 标签绑定区 */
        .binding-view-left {
            width: 40%;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .binding-view-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .binding-header {
            padding: 18px;
            background-color: #f8f9fc;
            border-bottom: 1px solid var(--border);
            font-weight: 500;
            color: var(--dark);
        }

        .binding-content {
            flex: 1;
            overflow: auto;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-content: flex-start;
        }

        /* 标签池 */
        .tag-pool {
            padding: 15px;
        }

        .tag-pool-title {
            margin-bottom: 15px;
            font-weight: 600;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .tag-pool-title .count {
            background-color: var(--primary);
            color: white;
            padding: 0 8px;
            border-radius: 12px;
            font-size: 0.9rem;
        }

        .tag-items {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .tag-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            background-color: #f8f9fc;
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: grab;
        }

        .tag-item:active {
            cursor: grabbing;
        }

        .tag-item i {
            color: var(--primary);
        }

        .tag-id {
            font-family: monospace;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        /* 位置标签区 */
        .position-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
        }

        .position-item {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .position-item.empty {
            background-color: #f8f9fc;
            border: 2px dashed var(--border);
            justify-content: center;
            color: #999;
        }

        .position-item.empty i {
            font-size: 2rem;
            color: #ccc;
            margin-bottom: 10px;
        }

        .position-title {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .position-tag {
            font-family: monospace;
            font-size: 0.85rem;
            background-color: #e8f5e9;
            padding: 3px 6px;
            border-radius: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .position-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 8px;
        }

        .position-actions button {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
        }

        .position-actions button:hover {
            color: var(--primary);
        }

        /* 导出模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            display: none;
        }

        .modal-content {
            background-color: white;
            border-radius: 12px;
            width: 500px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 20px;
            background-color: var(--primary);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            font-weight: 500;
        }

        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .modal-body {
            padding: 25px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: #444;
        }

        .radio-group {
            display: flex;
            gap: 25px;
            margin-bottom: 15px;
        }

        .radio-option {
            display: flex;
            align-items: center;
        }

        .radio-option input {
            margin-right: 10px;
        }

        .checkbox-group label {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .checkbox-group input {
            margin-right: 10px;
        }

        .modal-footer {
            padding: 20px;
            background-color: #f8f9fc;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }

        .btn-outline {
            background-color: white;
            border: 1px solid var(--border);
            color: #666;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-outline:hover {
            background-color: #f0f0f0;
        }

        /* 中国移动品牌元素 */
        .cmcc-brand {
            background-color: var(--m-red);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.85rem;
            display: inline-block;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div id="app-container">
        <!-- 头部导航 -->
        <div class="app-header">
            <div class="header-left">
                <div class="app-logo">
                    <i class="fas fa-tags"></i>
                    <h1>ODF电子标签管理系统</h1>
                </div>
                <div class="mode-switch">
                    <button class="active">单扫模式</button>
                    <button>群扫模式</button>
                </div>
            </div>
            <div class="header-right">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索标签或位置...">
                </div>
                <div class="user-menu">
                    <div class="user-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标签页导航 -->
        <div class="tab-nav">
            <button><i class="fas fa-home"></i> 首页</button>
            <button class="active"><i class="fas fa-link"></i> 标签绑定</button>
            <button><i class="fas fa-chart-bar"></i> 状态监控</button>
            <button><i class="fas fa-history"></i> 操作日志</button>
            <button><i class="fas fa-cog"></i> 系统设置</button>
        </div>

        <!-- 主内容区 -->
        <div class="app-content">
            <div class="content-wrapper">
                <!-- ODF结构面板 -->
                <div class="odf-structure-panel">
                    <div class="panel-header">
                        <span>ODF结构</span>
                        <div class="panel-header-actions">
                            <button title="刷新"><i class="fas fa-sync-alt"></i></button>
                            <button title="新建"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <div class="panel-content">
                        <ul class="odf-tree" id="odf-tree">
                            <!-- 动态生成树结构 -->
                        </ul>
                    </div>
                </div>

                <!-- 标签绑定主区域 -->
                <div class="binding-container">
                    <div class="binding-view">
                        <!-- 标签池区域 -->
                        <div class="binding-view-left">
                            <div class="binding-header">
                                <div class="tag-pool-title">
                                    <i class="fas fa-tags"></i> 未绑定标签池
                                    <div class="count">24</div>
                                </div>
                            </div>
                            <div class="tag-pool">
                                <div class="tag-items" id="tag-pool">
                                    <!-- 标签将通过JS动态生成 -->
                                </div>
                            </div>

                            <div class="binding-header">
                                <div class="tag-pool-title">
                                    <i class="fas fa-link"></i> 已绑定标签
                                    <div class="count">56</div>
                                </div>
                            </div>
                            <div class="tag-pool" id="bound-tags">
                                <!-- 已绑定标签将通过JS动态生成 -->
                            </div>
                        </div>

                        <!-- 位置绑定区域 -->
                        <div class="binding-view-right">
                            <div class="binding-header">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <span id="current-position">ODM-5 > 托盘-3</span>
                                    <button class="btn" style="padding: 5px 15px; font-size: 0.9rem;">
                                        <i class="fas fa-expand-alt"></i> 3D视图
                                    </button>
                                </div>
                            </div>
                            <div class="binding-content" id="position-grid">
                                <!-- 位置通过JS动态生成 -->
                            </div>
                        </div>
                    </div>

                    <!-- 底部操作栏 -->
                    <div class="binding-actions">
                        <button class="btn btn-warning">
                            <i class="fas fa-redo"></i> 重置绑定
                        </button>
                        <button class="btn">
                            <i class="fas fa-save"></i> 保存配置
                        </button>
                        <button class="btn btn-success" id="btn-export">
                            <i class="fas fa-file-export"></i> 导出文档
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导出模态框 -->
    <div class="modal-overlay" id="exportModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>导出电子标签文档</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>输出格式</label>
                    <div class="radio-group">
                        <label class="radio-option">
                            <input type="radio" name="format" value="excel" checked> Excel格式
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="format" value="pdf"> PDF格式
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>导出范围</label>
                    <div class="radio-group">
                        <label class="radio-option">
                            <input type="radio" name="scope" value="all" checked> 全部数据
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="scope" value="selected"> 仅选中的ODF结构
                        </label>
                        <label class="radio-option">
                            <input type="radio" name="scope" value="abnormal"> 仅异常数据
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>包含内容</label>
                    <div class="checkbox-group">
                        <label>
                            <input type="checkbox" name="include_tags" checked> 标签数据
                        </label>
                        <label>
                            <input type="checkbox" name="include_positions" checked> 位置信息
                        </label>
                        <label>
                            <input type="checkbox" name="include_tests"> 检测报告
                        </label>
                        <label>
                            <input type="checkbox" name="include_history"> 变更历史
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-outline" id="btn-cancel">取消</button>
                <button class="btn" id="btn-export-confirm">
                    <i class="fas fa-file-export"></i> 导出文档
                </button>
            </div>
        </div>
    </div>

    <script>
        // 标签数据结构示例
        const sampleTags = [
            "E2004103010101010790B774",
            "E2004103010101010790B775",
            "E2004103010101010790B776",
            "E2004103010101010790B777",
            "E2004103010101010790B778",
            "E2004103010101010790B779",
            "E2004103010101010790B780"
        ];

        const boundTags = [
            "E2004103010101010790A123",
            "E2004103010101010790A124",
            "E2004103010101010790A125",
            "E2004103010101010790A126"
        ];

        // 位置数据结构示例
        const positions = [];
        for (let port = 1; port <= 12; port++) {
            positions.push({
                id: port,
                tag: port === 3 ? boundTags[0] : port === 5 ? boundTags[1] : null
            });
        }

        // ODF树结构数据
        const odfStructure = [
            {
                id: "odf-1",
                name: "核心机房-主ODF",
                trays: [
                    { id: 1, name: "托盘1", ports: 12, bound: 10 },
                    { id: 2, name: "托盘2", ports: 12, bound: 12 }
                ]
            },
            {
                id: "odf-2",
                name: "核心机房-备ODF",
                trays: [
                    { id: 1, name: "托盘1", ports: 12, bound: 8 },
                    { id: 2, name: "托盘2", ports: 12, bound: 9 },
                    { id: 3, name: "托盘3", ports: 12, bound: 7 }
                ]
            },
            {
                id: "odf-5",
                name: "汇聚机房-ODF5",
                trays: [
                    { id: 1, name: "托盘1", ports: 12, bound: 11 },
                    { id: 2, name: "托盘2", ports: 12, bound: 10 },
                    { id: 3, name: "托盘3", ports: 12, bound: 9 }
                ]
            }
        ];

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            renderODFStructure();
            renderTagPool();
            renderBoundTags();
            renderPositionGrid();
            setupEventListeners();
        });

        // 渲染ODF树结构
        function renderODFStructure() {
            const treeContainer = document.getElementById('odf-tree');
            treeContainer.innerHTML = '';

            odfStructure.forEach(odf => {
                const odfItem = document.createElement('li');

                odfItem.innerHTML = `
                    <div class="tree-item">
                        <span class="tree-toggle"><i class="fas fa-caret-right"></i></span>
                        <i class="fas fa-server"></i>
                        <span>${odf.name}</span>
                        <span class="tag-count">${odf.trays.reduce((acc, tray) => acc + tray.bound, 0)}</span>
                    </div>
                    <ul class="tree-children">
                        ${odf.trays.map(tray => `
                            <li>
                                <div class="tree-item tray-item" data-odf="${odf.id}" data-tray="${tray.id}">
                                    <i class="fas fa-layer-group"></i>
                                    <span>${tray.name}</span>
                                    <span class="tag-count">${tray.bound}/${tray.ports}</span>
                                </div>
                            </li>
                        `).join('')}
                    </ul>
                `;

                treeContainer.appendChild(odfItem);

                // 绑定折叠/展开事件
                const toggle = odfItem.querySelector('.tree-toggle');
                toggle.addEventListener('click', function () {
                    const children = odfItem.querySelector('.tree-children');
                    if (children.style.display === 'none') {
                        children.style.display = 'block';
                        toggle.innerHTML = '<i class="fas fa-caret-down"></i>';
                    } else {
                        children.style.display = 'none';
                        toggle.innerHTML = '<i class="fas fa-caret-right"></i>';
                    }
                });
            });

            // 添加托盘点击事件
            document.querySelectorAll('.tray-item').forEach(item => {
                item.addEventListener('click', function () {
                    document.querySelectorAll('.tray-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    const odfId = this.dataset.odf;
                    const trayId = this.dataset.tray;
                    document.getElementById('current-position').textContent =
                        `${odfId.split('-')[1]} > ${trayId}`;

                    // 在实际应用中，这里会加载该托盘的端口数据
                    renderPositionGrid();
                });
            });
        }

        // 渲染标签池
        function renderTagPool() {
            const tagPool = document.getElementById('tag-pool');
            tagPool.innerHTML = '';

            sampleTags.forEach(tag => {
                const tagItem = document.createElement('div');
                tagItem.className = 'tag-item';
                tagItem.draggable = true;
                tagItem.innerHTML = `
                    <i class="fas fa-tag"></i>
                    <span class="tag-id">${tag}</span>
                `;

                // 添加拖拽事件
                tagItem.addEventListener('dragstart', function (e) {
                    e.dataTransfer.setData('text/plain', tag);
                });

                tagPool.appendChild(tagItem);
            });
        }

        // 渲染已绑定标签
        function renderBoundTags() {
            const boundTagsContainer = document.getElementById('bound-tags');
            boundTagsContainer.innerHTML = '';

            boundTags.forEach(tag => {
                const tagItem = document.createElement('div');
                tagItem.className = 'tag-item';
                tagItem.innerHTML = `
                    <i class="fas fa-tag" style="color: var(--success);"></i>
                    <span class="tag-id">${tag}</span>
                `;
                boundTagsContainer.appendChild(tagItem);
            });
        }

        // 渲染位置网格
        function renderPositionGrid() {
            const gridContainer = document.getElementById('position-grid');
            gridContainer.innerHTML = '';

            // 添加拖放区域事件
            gridContainer.addEventListener('dragover', function (e) {
                e.preventDefault();
            });

            gridContainer.addEventListener('drop', function (e) {
                e.preventDefault();
                const tagId = e.dataTransfer.getData('text/plain');

                // 找到拖放的位置元素
                const positionItem = e.target.closest('.position-item');
                if (positionItem && !positionItem.classList.contains('empty')) {
                    positionItem.querySelector('.position-tag').textContent = tagId;
                }
            });

            // 生成位置网格
            for (let i = 1; i <= 12; i++) {
                const position = positions.find(p => p.id === i) || { id: i, tag: null };
                const positionItem = document.createElement('div');

                if (position.tag) {
                    positionItem.className = 'position-item';
                    positionItem.innerHTML = `
                        <div>
                            <div class="position-title">端口-${i}</div>
                            <div class="position-tag">${position.tag}</div>
                        </div>
                        <div class="position-actions">
                            <button title="解绑"><i class="fas fa-unlink"></i></button>
                            <button title="详情"><i class="fas fa-info-circle"></i></button>
                        </div>
                    `;
                } else {
                    positionItem.className = 'position-item empty';
                    positionItem.innerHTML = `
                        <div>
                            <i class="fas fa-plug"></i>
                            <div>端口-${i}</div>
                        </div>
                    `;

                    // 添加拖放事件
                    positionItem.addEventListener('drop', function (e) {
                        e.preventDefault();
                        const tagId = e.dataTransfer.getData('text/plain');
                        const tagDisplay = document.createElement('div');
                        tagDisplay.className = 'position-tag';
                        tagDisplay.textContent = tagId;

                        this.innerHTML = `
                            <div>
                                <div class="position-title">端口-${i}</div>
                                <div class="position-tag">${tagId}</div>
                            </div>
                            <div class="position-actions">
                                <button title="解绑"><i class="fas fa-unlink"></i></button>
                                <button title="详情"><i class="fas fa-info-circle"></i></button>
                            </div>
                        `;
                        this.className = 'position-item';
                    });
                }

                gridContainer.appendChild(positionItem);
            }
        }

        // 设置事件监听
        function setupEventListeners() {
            // 导出按钮
            document.getElementById('btn-export').addEventListener('click', function () {
                document.getElementById('exportModal').style.display = 'flex';
            });

            // 取消导出
            document.getElementById('btn-cancel').addEventListener('click', function () {
                document.getElementById('exportModal').style.display = 'none';
            });

            // 关闭模态框
            document.querySelector('.close-modal').addEventListener('click', function () {
                document.getElementById('exportModal').style.display = 'none';
            });

            // 导出确认
            document.getElementById('btn-export-confirm').addEventListener('click', function () {
                const format = document.querySelector('input[name="format"]:checked').value;
                const scope = document.querySelector('input[name="scope"]:checked').value;
                const includeTags = document.querySelector('input[name="include_tags"]').checked;
                const includePositions = document.querySelector('input[name="include_positions"]').checked;
                const includeTests = document.querySelector('input[name="include_tests"]').checked;
                const includeHistory = document.querySelector('input[name="include_history"]').checked;

                generateDocument(format, scope, includeTags, includePositions, includeTests, includeHistory);
                document.getElementById('exportModal').style.display = 'none';
            });
        }

        // 生成文档
        function generateDocument(format, scope, includeTags, includePositions, includeTests, includeHistory) {
            alert(`正在生成文档...\n格式: ${format}\n范围: ${scope}`);

            if (format === 'excel') {
                generateExcel();
            }
        }

        // 生成Excel文档（简化的实现）
        function generateExcel() {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('电子标签数据');

            // 设置标题行
            worksheet.columns = [
                { header: '位置', key: 'position' },
                { header: 'RFID标签', key: 'rfid' },
                { header: '类型', key: 'type' },
                { header: '状态', key: 'status' }
            ];

            // 添加一些示例数据
            worksheet.addRow({
                position: 'ODM-5 > 托盘-3 > 端口-1',
                rfid: 'E2004103010101010790A123',
                type: 'SC插头',
                status: '已验证'
            });

            worksheet.addRow({
                position: 'ODM-5 > 托盘-3 > 端口-2',
                rfid: 'E2004103010101010790A124',
                type: 'FC插头',
                status: '已验证'
            });

            // 保存Excel
            workbook.xlsx.writeBuffer().then(buffer => {
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                saveAs(blob, '中国移动电子标签数据.xlsx');
            });
        }
    </script>
</body>

</html>